const localVideoEl = document.querySelector("#video")
 var audioSource = document.querySelector("#audioSource");
 var audioOutput = document.querySelector("#audioOutput");
 var videoSource = document.querySelector("#videoSource");

 if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){
     alert("Media devices not supported");
 }else{
     navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(err => {
         console.log(err);
     });
 }
 
 function gotDevices(deviceInfos){
    deviceInfos.forEach(dev => {
        
        var options = document.createElement('option');
        if(dev.label === ''){
            options.text = 'Default';
        }else{
            options.text = dev.label;
        }
        options.value = dev.deviceId;
        if(dev.kind === 'audioinput'){
            audioSource.appendChild(options);
        }else if( dev.kind === 'audiooutput'){
            audioOutput.appendChild(options);
        }else if(dev.kind === 'videoinput'){
            videoSource.appendChild(options);
        }
        console.log(dev);
    });
 }

//获取到流
function gotMediaStream (stream){
    localVideoEl.srcObject = stream; 
    return navigator.mediaDevices.enumerateDevices();   //成功获取流；并返回一个promise；用于后边对设备的判断
 }

async function call(){  
    // navigator.mediaDevices.getUserMedia({
    //         video: true,
    //         audio: true,
    // }).then(gotMediaStream)
    // .then(gotDevices)
    // .catch(err => {
    //     console.log("2222");
    //     console.log(err);
    // });
    navigator.mediaDevices.getDisplayMedia({
        video: true,
        audio: true,
    }).then(gotMediaStream)
    .then(gotDevices)
    .catch(err => {
        console.log("2222");
        console.log(err);
    });
}

document.querySelector("#start").addEventListener('click',call)